<template>
  <div class="flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 relative overflow-hidden top-container">
    <!-- 背景效果 -->
    <div class="absolute inset-0 overflow-hidden">
      <!-- 动态背景形状 - 增强可见度 -->
      <div class="absolute top-20 left-20 w-96 h-96 bg-blue-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
      <div class="absolute -bottom-20 -right-20 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
      <div class="absolute top-1/2 left-1/3 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
      
    </div>
    
    <div class="relative z-10 w-full max-w-lg">
      <!-- 404 错误容器 -->
      <div class="text-center">
        <h1 class="text-9xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">
          404
        </h1>
      </div>
      
      <div class="text-center mt-6 space-y-6">
        <h2 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">页面不存在</h2>
        
        <p class="text-gray-600 dark:text-gray-300 text-lg max-w-md mx-auto">
          抱歉，您访问的页面已经进入了数字虚空。
        </p>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
          <router-link
            to="/"
            class="px-6 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold shadow-lg hover:shadow-blue-300/50 transform hover:scale-105 transition duration-300 relative overflow-hidden group"
          >
            <span class="absolute top-0 left-0 w-full h-full bg-white/20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></span>
            返回首页
          </router-link>
          
          <router-link 
            to="/servers" 
            class="px-6 py-3 rounded-lg bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-semibold border border-gray-200 dark:border-gray-700 shadow-lg hover:shadow-purple-300/30 transform hover:scale-105 transition duration-300 relative overflow-hidden"
          >
            浏览MCP列表
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 inline" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </router-link>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script setup lang="ts">
// 无需额外逻辑
</script>

<style scoped>
.top-container {
  min-height: calc(100vh - 4rem);
  box-shadow: 0 0 10px 2px rgba(129, 140, 248, 0.1);
}
/* 动画效果 */
.animate-blob {
  animation: blob 15s infinite ease-in-out alternate;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); opacity: 0.3; }
  50% { transform: translate(30px, -50px) scale(1.2); opacity: 0.4; }
  100% { transform: translate(-20px, 20px) scale(0.8); opacity: 0.3; }
}

/* 星星动画 */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #818cf8;
  box-shadow: 0 0 10px 2px rgba(129, 140, 248, 0.7);
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 4s infinite ease-in-out;
}

.star:nth-child(1) { top: 10%; left: 10%; animation-delay: 0.1s; }
.star:nth-child(2) { top: 20%; left: 30%; animation-delay: 0.3s; }
.star:nth-child(3) { top: 30%; left: 5%; animation-delay: 0.5s; }
.star:nth-child(4) { top: 5%; left: 80%; animation-delay: 0.7s; }
.star:nth-child(5) { top: 45%; left: 95%; animation-delay: 0.9s; }
.star:nth-child(6) { top: 50%; left: 15%; animation-delay: 1.1s; }
.star:nth-child(7) { top: 60%; left: 35%; animation-delay: 1.3s; }
.star:nth-child(8) { top: 70%; left: 65%; animation-delay: 1.5s; }
.star:nth-child(9) { top: 80%; left: 75%; animation-delay: 1.7s; }
.star:nth-child(10) { top: 90%; left: 85%; animation-delay: 1.9s; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* 宇航员动画 */
.astronaut {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: float 6s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-15px); }
}
</style> 